<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">

    <title>欢迎</title>
    <link href="assets/bootstrap/css/bootstrap.min.css" th:href="@{/assets/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900|Dancing+Script:400,700|Raleway:400,100,300,700,900|Reenie+Beanie&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    <link href="assets/font-awesome/css/font-awesome.min.css" th:href="@{/assets/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
   <link href="assets/css/plugins.css" th:href="@{/assets/css/plugins.css}" rel="stylesheet">
    <link href="style.css" th:href="@{/style.css}" rel="stylesheet">
    <style>
        .image-item {
            display: block;
            margin-bottom: 50px;
            height: 300px;//一定记得设置图片高度
        }
    </style>
</head>

<body class="top-navigation pushy-right-side regular-nav">

    <!-- Site Overlay -->
    <div class="site-overlay"></div>

    <div id="master-wrapper">
        <div th:replace="main/common/header::header-menu"></div>
        <section class="white-wrapper">

            <div class="section-inner">
                <div class="container">
                    <div class="row mb60 text-center">
                        <div class="col-sm-12">
                            <p class="section-sub-title">欢迎回来！    转到>>>>>>>><a href="https://www.cnblogs.com/xiaobaibuai/">博客园</a></p>
                            <p class="section-sub-title text-left match-height">最近</p>
                        </div>

                    </div>
                </div>

                <div class="container">
                    <div class="row">
                        <div class="col-md-6 match-height mb30" th:classappend="${(userStat.count>2?'col-md-4':'')}" th:each="item,userStat:${textContent}" >
                            <div class="hover-effect smoothie">
                                <a href="#" class="smoothie">
                                    <img src="" th:attr="data-original=${item.imageUri}"   th:if="${item.imageUri}!=null" class="img-responsive smoothie image-item"></a>
                                    <img src="" th:attr="data-original=@{/static/assets/images/blog/blog-6.jpg}"   th:if="${item.imageUri}==null" class="img-responsive smoothie image-item"></a>
                                <div class="hover-overlay smoothie text-center">
                                 <h6 style="color: #F64747;" >[[${#dates.format(item.time, 'yyyy-MM-dd HH:mm')}]]</h6>
                                    <div class="vertical-align-bottom">

                                        <h4 th:text="${item.title}"></h4>
                                        <span class="item-category-span" th:text="${item.categoryName}">分类</span>
                                    </div>
                                    
                                </div>

                                <div class="hover-caption dark-overlay smoothie text-center">
                                    <div class="vertical-align-top" >
                                        <p class="mb20" ><small th:utext="${item.textContent}"></small></p>

                                    </div>
                                    <div class="vertical-align-bottom" >
                                        <a th:href="${'/detail?id='+item.iD}" class="btn btn-primary mb20">详情</a>
                                        <button sec:authorize="isAuthenticated()" th:onclick="f([[${item.iD}]])"  class="btn btn-primary mb20">删除</button>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="our-work">
            <div class="section-inner">
                <div class="container">
                    <div class="row mb60 text-center">
                        <div class="col-sm-6 text-left match-height">
                            <p class="section-sub-title">分类</p>
                            <p class="section-sub-title">Boom Boom Boom ~~</p>
                        </div>
                        <div class="col-sm-6 text-left match-height">
                            <ul class="masonry-portfolio-filter list-unstyled list-inline wow fadeIn text-right vertical-center-js" data-wow-delay="0.2s">
                                <li><a class="btn btn-primary btn-transparent active" href="#" data-filter="*">All</a></li>
                                <li th:each="item:${category}"><a class="btn btn-primary btn-transparent" href="#"  th:data-filter="'.'+${item.categoryName}">[[${item.categoryName}]]</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="masonry-portfolio row">
                                        <div>
                                            <div class="masonry-portfolio-items">
                                                <div class="row">
                                                    <div class="col-sm-4 masonry-portfolio-item mb30 mb30" th:classappend="${item.categoryName}" th:each="item:${textContentAll}">
                                                        <div class="hover-effect smoothie">
                                                            <a href="#" class="smoothie">
                                                                <img src="" th:attr="data-original=${item.imageUri}"   th:if="${item.imageUri}!=null" class="img-responsive smoothie image-item"></a>
                                                            <img src="" th:attr="data-original=@{/static/assets/images/blog/blog-6.jpg}"   th:if="${item.imageUri}==null"  class="img-responsive smoothie image-item"></a>
                                                            <div class="hover-overlay smoothie text-center">
                                                                <div class="vertical-align-bottom">
                                                                    <h4 th:text="${item.title}"></h4>
                                                                </div>
                                                            </div>
                                                            <div class="hover-caption dark-overlay smoothie text-center">
                                                                <div class="vertical-align-bottom">
                                                                    <a th:href="${'/detail?id='+item.iD}" class="btn btn-primary mb20">详情</a>
                                                                    <a th:href="${item.imageUri}" class="lb-link btn btn-primary mb20">大图</a>
                                                                    <button sec:authorize="isAuthenticated()" th:onclick="f([[${item.iD}]])"  class="btn btn-primary mb20">删除</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        <a href="#" id="back-to-top"><i class="fa fa-angle-up"></i></a>
        <div class="sub-footer" style="text-align: center;">
            <p class="copyright"><small>XXX &copy; 2020-2099.虫虫专属.</small></p>
        </div>
    </div>

    <script src="assets/js/jquery.min.js" th:src="@{/assets/js/jquery.min.js}"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js" th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
    <script src="assets/js/owl-carousel.js" th:src="@{/assets/js/owl-carousel.js}"></script>
    <script src="assets/js/plugins.js" th:src="@{/assets/js/plugins.js}"></script>
    
    <script src="assets/js/init.js" th:src="@{/assets/js/init.js}"></script>
    <script type="text/javascript" th:src="@{/assets/layui/layui.js}"></script>
    <script>
        //进页面直接调用
        start()
        // 滚动的时候执行加载函数
        $(window).on('scroll',function(){
            start()
        })

        //加载函数
        function start(){
            //not('[data-isLoaded]') 用来过滤已经加载过的，实现节流
            $('.container img').not('[data-isLoaded]').each(function(){
                if( isShow($(this)) ){
                    loadImg($(this))
                }
            })
        }

        // 判断是否进入视野的函数
        function isShow($node){
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
        }

        // 格式化图片加载地址函数
        function loadImg($img){
            //setTimeout模拟延迟 测试效果用，实际环境不要加
            // setTimeout(function(){
            $img.attr('src', $img.attr('data-original'))
            // },500)
            //加载过后就添加 data-isLoaded属性
            $img.attr('data-isLoaded',1)
        }
    </script>
    <script>
            function f(id) {
                layui.use(['jquery','layer'], function() {
                    var layer = layui.layer,$=layui.jquery;
                layer.confirm('想清楚了哦，确定删除？', {
                    btn: ['十分确定', '我再想想']
                }, function(index, layero){
                    $.ajax({
                        url:"/delete",
                        data:{'id':id},
                        type:"Post",
                        dataType:"json",
                        success:function(data){
                            console.log(data);
                            layer.msg(data.msg);
                            location.reload(); //删除成功后再刷新
                        },
                        error:function(data){
                            layer.msg(data.msg);
                        }
                    });
                }, function(index){
                });
                })
            }
    </script>
</body>

</html>
